<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            border: solid 1px #ddd;
            margin-bottom: 10px;
            padding: 10px;
        }

        li>a {
            color: green;
        }
    </style>
</head>

<body>
    <script>
        //特别的说明
        // let name = "后盾人";
        // let web = "houdunren.com";

        // // 标签模版
        // console.log(tag`在线教程${name},网址是${web}。`); 不是带括号的

        // function tag(strings, name, web) {
        //     console.log(strings);
        //     console.log(name, web);
        // }

        let lessons = [
            { title: "后盾人媒体查询相应式布局", author: "后盾人" },
            { title: "FLEX 弹性盒子", author: "后盾人" },
            { title: "GRID 栅格系统教程", author: "后盾人" },
        ];
        function template() {
            return `<ul>
                ${lessons.map(item => links`<li>作者：${item.author}，课程：${item.title}</li>`).join("")}
</ul>`;
        }
        //标签模板
        function links(strings, ...vars) {
            // console.log(strings);
            // console.log(vars);
            return strings.map((str, key) => {
                console.log(str);
                // console.log(key);
                return str + (vars[key] || "").replace("后盾人", `<a href="www.baidu.com">后盾人</a>`);
            }).join('');
        }
        document.body.innerHTML += template();
    </script>
</body>

</html>